<template>
  <div class="main">
    <h2>一句话</h2>
    <div class="content">
      {{ sentence }}
    </div>
    <div class="footer">
      <a-row>
        <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-for="item of typeList">
          <a-tooltip>
          <template #title>{{'获取一句' + item}}</template>
            <a-button type="primary" size="small" style="margin-bottom: 5px" @click="getTypeSentence(item)">{{item}}</a-button>
        </a-tooltip></a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import myAxios from "../axios.js";

const sentence = ref('');
const getTypeSentence = (item) => {
  let isRandom = 0;
  if(item == '随机'){
    isRandom = 1;
  }
  myAxios.get('/sentence/getOne?isRandom='+isRandom+'&type='+item).then(
      res => {
        sentence.value = res.data.content;
      }
  )
}
onMounted(() => {
  myAxios.get('/sentence/getOne?isRandom=1').then(
      res => {
        sentence.value = res.data.content;
      }
  )
})
const typeList = ref([
  "原创",
  "其他",
  "动画",
  "哲学",
  "影视",
  "文学",
  "游戏",
  "漫画",
  "网络",
  "诗词",
  "鸡汤",
  "随机",
  "网易云",
  "抖机灵",
])
</script>

<style scoped>
.main {
  font-family: 'KUAILE';
  font-size: 30px;
  height: 80vh;
  background: no-repeat url('https://tuapi.eees.cc/api.php?category=dongman&type=302&px=m');
  background-size: cover;
  background-position-x: 80%;
}

.main .content {
  writing-mode: vertical-rl;
  height: 50vh;
  margin: 0 auto;
  background: none;
}
.main .footer{
  margin-top:30px;
}
@font-face {
  font-family: 'KUAILE'; /* 自定义字体的名称 */
  src: url('../assets/fontFromGoogle.ttf') format('truetype'); /* 字体文件路径和格式 */
}
</style>